<template>
  <p v-if="total > 0" class="fee-up"
     :class="{'text-green-300':audit}"
  >{{ total }} 人民币</p>
  <p class="fee-down" v-for="item in list">
    <span :class="{
      'through':item.statement_fee_id>0,
      'text-green-300':item.status ==1 &&  item.share_id == 0,
      'text-blue-300':item.status ==1 && item.share_id > 0,
      'text-orange-300':item.status !=1,
    }" class="pos">

    {{ item.amount }} {{ getDictData('dictObj','declaration_currency', item.currency,2,columnsDist) }}
    {{ getDictData('attrApi','dicthelpApi_feeTypeList', item.fee_type,6,columnsDist) }} ({{ item.unit_amount }}/{{ getDictData('dictObj','ChargeType', item.unit,2,columnsDist)}})
    <div class="pos-list">{{ getDictData('attrApi','dicthelpApi_feeTypeList', item.fee_type,6,columnsDist) }}/{{ item.status==1 ? '已审核':'未审核'  }}/{{ item.statement_fee_id==0 ? '未核销':'已核销'  }}</div>
    </span>
  </p>
  <p style="color:#f00" v-if="total==0 && list.length==0">0.00</p>
</template>
<script setup>
import {inject} from "vue";

const props = defineProps({
  total: {
    // type: Number,
    default: 0
  },
  list: {
    type: Array,
    default: () => {
      return []
    }
  },
  audit:{
    // type: Boolean,
    default: false
  }
})
const getDictData = inject('getDictData')
const columnsDist = inject('columnsDist')

</script>
<style>

.fee-up {
  border-bottom: dashed #777777 1px;
}

.fee-down {
  color: orange;
}

.customer-input-item .arco-btn-group button:first-child {
  display: none;
}
.pos{
  position: relative;
}
.pos:hover .pos-list{
  display: block;
}
.pos-list{
  position: absolute;
  left: 100px;
  top: 0;
  /* min-width: 200px; */
  /* width: 100%; */
  padding: 0 6px;
  background: #fff;
  z-index: 1000;
  display: none;
  border: 1px solid #777777;
  border-radius: 4px;
  color: #333333;
  white-space:nowrap
}
.through{
  text-decoration: line-through;
  color:#999999;
}
</style>